<!DOCTYPE html>
<html lang="en">
<head>
    <script src="../js/vue.js"></script>
    <title>计算属性</title>
</head>
<body>
    <!-- 
        1.数据从页面流向实例--- v-model
        2.只有在指令中方法的小括号才能省略
        3.只要监控数据更新了，模板代码就会重新执行一遍
        4.计算属性时属性，不要当成函数使用
     -->

     <div id="root">
         姓：<input type="text" v-model='firstName'><br> <br>
         名：<input type="text" v-model='lastName'><br> <br>
         全名：<span>{{fullName}}</span><br> <br>
         全名：<input type="text" v-model='fullName'><br> <br>
     </div>

     <script>
         let vm = new Vue({
             el:'#root',
             data:{//收集到_data中，在通过数据代理绑定到vm中
                firstName:'张',
                lastName:'三'
             },
             computed:{
                 /*
                    1.计算属性: 属性不存在，需要计算得来；需要也是挂在到vm中了
                    2.计算属性谁调用？------Vue
                    3.fullName设计时候调用? 初次渲染就会调用，另外依赖的属性变化时才调用
                    //简写--只能读，相当于只绑定了get方法
                    fullName(){//get
                        console.log('@',this);
                        return firstName+lastName;
                    } 
                 */

                //完整写法
                fullName:{
                    get(){
                        return this.firstName+'-'+this.lastName
                    },
                    set(value){
                        let arr = value.split('-');
                        this.lastName = arr[1];
                        this.firstName = arr[0];
                        console.log(this);
                    }
                }
             }
         });
     </script>
</body>
</html>